<template>
  <div class="app-container">
    <!--操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="primary" plain @click="addRootForm" class="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>

    <!--数据显示区-->
    <el-row class="select-table table-striped">
      <el-col :span="24">
          <el-table
            :data="treeData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column prop="id" label="分类ID"></el-table-column>
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="level" label="等级"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column prop="createBy" label="创建者"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope = "scope">
                <el-button type="text" class="el-icon-edit" @click="editForm(scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.level === 1 || scope.row.level === 2"
                class="el-icon-plus" @click="addForm(scope.row)">添加子菜单</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="560px">
      <el-form :model="form" ref="form">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单:" :label-width="formLabelWidth" prop="parentName">
               <el-input  :value="parentName" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
               <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="级别" :label-width="formLabelWidth" prop="level">
               <el-input :value="form.level" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
         </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import courseCategoryService from '@/service/courseCategoryService.js'
  //vue规范
  export default{
    //初始化数据
    data() {
      return {
        //树形菜单数据
        treeData:[],
        //模态框开关变量
        dialogFormVisible:false,
        //模态框标签
        title:"",
        //向后台提交的数据
        form:{
          name:undefined,
          parentId:0,
          level:undefined
          },
          formLabelWidth:'100px',
          //上级菜单名
          parentName:''
      }
    },
    //vue管理的方法
    methods: {
        addRootForm(){
          courseCategoryService.addRootForm();
        },
        editForm(data){
          courseCategoryService.editForm(data);
        },
        addForm(data){
          courseCategoryService.addForm(data);
        },
        saveForm(){
          courseCategoryService.saveForm();
        }
    },
    //初始化调用方法
    created() {
      courseCategoryService.init(this)
      courseCategoryService.loadData()
    }
  }
</script>
